@mixin w {
    margin-left: 40px;
    margin-right: 40px;
}

#detail {
    width: 1000px;
    display: flex;
    margin: 100px  auto;
    justify-content: center;
    align-content: center;

    .detail-l {
        width: 350px;
        margin-right: 20px;

        .show-box {
            position: relative;
            width: 350px;
            height: 350px;
            border: 1px solid rgba(0,0,0,.05);

            img {
                width: 350px;
                height: 350px;
            }

            .mask {
                position: absolute;
                top: 0;
                left: 0;
                width: 150px;
                height: 150px;
                background-color: rgba(168, 168, 98,.4);
                pointer-events: none;
                display: none;
            }
        }

        ul {
            display: flex;
            justify-content: space-between;
            li{
                width: 50px;
                
                img{
                    width: 50px;
                }
            }
            .active{
                
                border: 2px solid #000;
            }
        }

    }

    .detail-r{
        position: relative;
        .box{
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            .img1{
                position: absolute;
                top: 0;
                left: 0;
                display: none;
                // z-index: 10;
                width: 350px;
                height: 350px;
                // overflow: hidden;
                
            }
        }
        
        .detail-g{
            // visibility:visible;
        //    
            .detail-menu{
                width: 765px;
                height: 200px;
                background: url(../static/images/details-img2.png) no-repeat;
                background-attachment: fixed;
                background-size: cover;               
                background-color: #464646;
                line-height: 200px;
                .sp1{
                    color: #FF0036;
                    font-size: 20px;
                    margin: 10px 20px 0 10px;

                }
                .sp2{
                    color:#FF0036;
                    font-size: 30px;
                }
                .sp3{
                    color: #FF0036;
                    font-size: 60px;
                    margin-right: 20px;
                }
                .sp4{
                    
                    color: aliceblue;
                    background-color: #F47A86;
                    font-size: 20px;
                }
            }
            .buy-now{
                background-color: #FFEDED;
                border: 1px solid #FF0036;
                color:#FF0036;
                width: 225px;
                height: 50px;
                margin-top: 10px;
                cursor: pointer;
                z-index: 100;
            }
            .add-cart{
                background-color: #FF0036;
                color:white;
                border:  none;
                width: 225px;
                height: 50px;
                margin-top: 10px;
                @include w;
                cursor: pointer;
                z-index: 100;

            }
            .look-cart{
                margin-left: 0;
                margin-right: 0;
                @extend .add-cart;
                cursor: pointer;

            }
        }
    }
}